<template>
    <div class="elWrapper">
        <h3>示例</h3>
        <treePage-Table ref="treePage" v-bind="tableParams"></treePage-Table>
        <div class="markdown-body">
            <treePageTableMD></treePageTableMD>
        </div>
    </div>   
</template>
<script>
import {queryApi, fileUpload, fileUploadvideo} from '@/api/api'
import treePageTable from '../components/treePageTable'
import treePageTableMD from '../md/treePageTableMD.md'
export default {
    name: "Home",
    components: {
        treePageTable,
        treePageTableMD 
    },
    data() {
      return {
            tableParams:{
                isTable:true,
                stripe:false,
                tooltip:"dark",
                // apiName:queryApi,
                // 表头数据
                columns:[
                    // {prop: '', label: '', width: '60', align: 'center',type:"selection",fixed:'',isShow:true},
                    {prop: 'name', label: '姓名', align: 'center',type:"input",fixed:'',isShow:false},
                    {prop: 'date',label: '日期', align: 'center',type:"dictionary",fixed:'',isShow:true},
                    // propString 最后要转换为文字的字段 formatterArrayString:"LEVEL",
                    //filterProp:自定义数据字典  filterProp:[{"level":1,"levelString":"一级"},{"level":2,"levelString":"二级"},{"level":3,"levelString":"三级"}]
                    //formatterArrayString:接口返回数据字典数据名 例如:"LEVEL" "IS_MARRY"
                    {prop: 'address', label: '地址', align: 'center',type:"",fixed:'',isShow:true,isSortable:true}
                ],
                //表格数据
                tableData: [{
                    id: 1,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                }, {
                    id: 2,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄',
                    children: [{
                            id: 21,
                            date: '2016-05-04',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1517 弄',
                        }]
                }, {
                    id: 3,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                }, {
                    id: 4,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    id: 5,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    id: 6,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                // 分页
                pageSizeOpt: ['10','20','50','100','200'],
                pageNum:1,
                pageSize:10,
                // 表格高度最大值
                maxHeight:300, //上下布局主子表250 单表450
                width:100,
            }
        }
    },
    mounted(){
        this.$refs.treePage.query({})
    },
    methods: {
    //    initTable(){
    //        this.$refs.treePageTable.query({});
    //    }
    },
    // created(){
    //      this.$refs.treePageTable.query();
    // }
}
</script>
<style scoped lang>
    .elWrapper{
        width:100%;
        padding:10px 20px;
        box-sizing:border-box;
    }
    
</style>


